<?xml version="1.0"?>
<jsp:root 	xmlns:jsp="http://java.sun.com/JSP/Page"
 			xmlns:c="http://java.sun.com/jsp/jstl/core"
 			xmlns:fn="http://java.sun.com/jsp/jstl/functions"
 			xmlns="http://www.w3.org/1999/xhtml"
 			version="2.1">
 
 <jsp:directive.page contentType="text/html" pageEncoding="UTF-8" />
 <jsp:directive.page isELIgnored="false" />
 <jsp:output 	omit-xml-declaration="false" 
 			 	doctype-root-element="HTML" 
 				doctype-system="about:legacy-compat" />
 
 <jsp:useBean id="datosLogin" class="es.javamyadmin.beans.LoginBean" scope="session" />
 
 <jsp:useBean id="listaTablesBean" class="es.javamyadmin.beans.ListaTablesBean" scope="session" />
 
 <jsp:setProperty property="user" name="listaTablesBean" value="${datosLogin.usuario}" />
 <jsp:setProperty property="pass" name="listaTablesBean" value="${datosLogin.password}" />
 <jsp:setProperty property="host" name="listaTablesBean" value="${datosLogin.servidor}" />
 <jsp:setProperty property="port" name="listaTablesBean" value="${datosLogin.puerto}" />
 
 
 <c:if test="${param.bd != null and param.bd != ''}">
 	<jsp:setProperty property="database" name="listaTablesBean" value="${param.bd}" />
 </c:if>
 <c:if test="${param.tabla != null and param.tabla != ''}">
 	<jsp:setProperty property="table" name="listaTablesBean" value="${param.tabla}" />
 </c:if>
 <c:if test="${nuevaTabla != null and nuevaTabla != ''}">
 	<jsp:setProperty property="table" name="listaTablesBean" value="${nuevaTabla}" />
 </c:if>

<html>
<head>

<link rel="icon" href="${pageContext.request.contextPath}/images/icons/favicon.png" type="image/x-icon"/>
<link rel="shortcut icon" href="${pageContext.request.contextPath}/images/icons/favicon.png" type="image/x-icon" />

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/java-admin.css" media="screen" />

<script src="${pageContext.request.contextPath}/js/alterTable.js"><!--A--></script>
<script src="${pageContext.request.contextPath}/js/jquery.js"><!-- N --></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-transition.js"><!-- N --></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-modal.js"><!-- N --></script>
<script src="${pageContext.request.contextPath}/js/ajaxCargarMsjConfirmacion.js"><!-- N --></script>

<title>JavaMyAdmin</title>

<script>
	$(document).ready(function() {
		$('#windowTitleDialog').bind('show', function () {
			
		});
	});
	function closeDialog () {
		$('#windowTitleDialog').modal('hide'); 
	};
	function okClicked () {
		closeDialog ();
	};	
</script>

<style>
	.oculto{
		display: none;
	}
	
	.visible{
		display: block;
	}
</style>

</head>

<body onload="cargarTablas('${listaTablesBean.user}','${listaTablesBean.pass}','${listaTablesBean.host}','${listaTablesBean.port}','${listaTablesBean.database}');">
<div id="wrapper">
<div id="todo">

<div id="contenedor">
	
	<jsp:include page="../includes/sidebar-left.jsp" />
	
	<div id="contenido">
	
		<jsp:include page="../includes/cabecera.jsp" />
		
		<h2>Base de Datos: <c:out value="${listaTablesBean.database}"></c:out> >> Tabla: <c:out value="${listaTablesBean.table}"></c:out></h2>
		
		<jsp:include page="../includes/menu-tabla-superior.jsp" />
		
		<!-- Errores -->
		<c:if test="${error!=null}"><div id="ko"  class="aviso"><div class="pro_aviso ko"><p>${error }<c:if test="${descripcion != null}"><a id="especial" data-toggle="modal" href="#windowTitleDialog" onclick="cargarDatosMsj('6', '${descripcion}', '');" style="font-size:'10px'; "> (más)</a></c:if></p></div></div></c:if>
		<c:if test="${ok!=null}"><div class="aviso"><div class="pro_aviso ok"><p>${ok}</p></div></div></c:if>
		
		<!-- VENTANA EMERGENTE DE CONFIRMACIÓN -->
		<div id="windowTitleDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="windowTitleLabel" aria-hidden="true">
			<!-- se cargará el mensaje por ajax -->
		</div>
		<!-- FIN VENTANA EMERGENTE -->

		<form method="post" action="${pageContext.request.contextPath}/alterTable">
		<table id="lista-tablas">		
			<tr>
				<th style="border-radius: 5px 0 0 0;">EDITAR</th>
				<th>CAMPOS</th>
				<th>TIPO</th>
				<th style="min-width: 45px;">NULL</th>
				<th>DEFAULT</th>
				<th>AUTO-INCREMET</th>
				<th style="border-radius: 0 5px 0 0;">ELIMINAR</th>
			</tr>
			<c:forEach var="lista" items="${listaTablesBean.describe}" varStatus="estado">
				<input type="hidden" name="nombreAnterior${estado.index }" value="${lista.nombreColum}"/>
				<tr id="filaAl${estado.index }">
					<td align="center"><input type="checkbox" name="editar${estado.index }" onclick="editable(${estado.index })" /></td>
					<td align="center"><input class="campo" type="text" disabled="disabled" name="nombreColum${estado.index }" value="${lista.nombreColum}"/></td>
					<td align="center"><input class="campo" type="text" disabled="disabled" name="tipoColum${estado.index }"  value="${lista.tipoColum}"/></td>
					<c:if test="${lista.nullColum == 'NO'}">
						<td align="center"><input type="checkbox" disabled="disabled"  name="nullColum${estado.index }"/></td>
					</c:if>
					<c:if test="${lista.nullColum == 'YES'}">
						<td align="center"><input type="checkbox" disabled="disabled"  checked="checked" name="nullColum${estado.index }"/></td>
					</c:if>
					<td align="center"><input class="campo" type="text" disabled="disabled" name="defaultColum${estado.index }"  value="${lista.defaultColum}"/></td>
					<td align="center">
						<c:if test="${lista.extraColum == 'auto_increment' }">
						<input type="checkbox" disabled="disabled" name="extraColum${estado.index }" checked="checked"/>
						</c:if>
						<c:if test="${lista.extraColum != 'auto_increment' }">
						<input type="checkbox" disabled="disabled" name="extraColum${estado.index }"/>
						</c:if>
					</td>
					<td align="center"><input id="delete${estado.index }" type="checkbox" name="delete${estado.index }" onclick="eliminar(${estado.index })" /></td>
				</tr>
				<c:set var="num" value="${estado.index }" />
			</c:forEach>
	 	</table>
	 	<div>
	 	<div style="float: left; width: 47%;">	 	
		 	<table id="lista-tablas" style="margin: 40px 0 0 0; width: 99%;">
		 		<tr>
		 			<th align="center" style="border-radius: 5px 5px 0 0;" colspan="2">INSERTAR KEY</th>
		 		</tr>
		 		<tr id="inserccion">
		 			<td align="center">
		 				<select name="addTipoKey" class="campo">
		 					<option></option>
		 					<option value="PRIMARY KEY">Primary key</option>
		 					<option value="KEY">Multi key</option>
		 					<option value="index">Unique</option>
		 				</select>
		 			</td>
		 			<td align="center">
		 				<select name="addKey" class="campo">
		 					<option></option>
		 					<c:forEach var="desc" items="${listaTablesBean.describe}">
		 						<c:if test="${desc.keyColum == ''}">
		 							<option value="${desc.nombreColum }" ><c:out value="${desc.nombreColum }" /></option>
		 						</c:if>
		 					</c:forEach>
		 				</select>
		 			</td>
		 		</tr>
		 	</table>
	 	</div>
	 	
	 	<div style="float: left; margin-left: 40px;width: 47%;">
		 	<table id="lista-tablas" style="margin: 40px 0 0 0; width: 99%;">
		 		<tr>
		 			<th align="center" style="border-radius: 5px 5px 0 0;" colspan="2">QUITAR KEY</th>
		 		</tr>
		 		<tr id="inserccion">
		 			<td align="center">
		 				<select name="removeTipoKey" class="campo">
		 					<option></option>
		 					<option value="PRIMARY KEY">Primary key</option>
		 					<option value="KEY">Multi key</option>
		 					<option value="index">Unique</option>
		 				</select>
		 			</td>
		 			<td align="center">
		 				<select name="removeKey" class="campo">
		 					<option></option>
		 					<c:forEach var="desc" items="${listaTablesBean.describe}">
		 						<c:if test="${desc.keyColum != ''}">
		 							<option value="${desc.nombreColum }" ><c:out value="${desc.nombreColum }" /></option>
		 						</c:if>
		 					</c:forEach>
		 				</select>
		 			</td>
		 		</tr>
		 	</table>
	 	</div>
	 	<div style="clear: both;"><!-- A --></div>
	 	</div>
	 	<br />
	 	<label for="renombrarTabla">Renombrar tabla</label> <input style="margin-left: 10px;" type="checkbox" name="renombrarTabla" onclick="rTabla()" id="renombrarTabla" />
	 	<div id="rLaTabla"><!-- A --></div>
	 	<br />
	 	<br />
	 	<label for="insertarCampo">Insertar campos</label> <input style="margin-left: 10px;" type="checkbox" name="insertarCampo" onclick="insertarOc()" id="insertarCampo" />
	 	<br />
	 	<br />
	 	<div id="nuevoCampo" class="oculto">
	 	<table id="crearTabla">
				<tr>
					<th  style="border-radius: 5px 0 0 0;">Nombre</th>
					<th>Tipo</th>
					<th>Longitud</th>
					<th>Predeterminado</th>
					<th>Atributos</th>
					<th>Nulo</th>
					<th>Primary key</th>
					<th style="border-radius: 0 5px 0 0;">A_I</th>
				</tr>

				   	<tr id="fila1">
				   		<td align="center"><input class="campo" type="text" name="nombreCampo1"/></td>
				   		<td align="center">
				   			<select class="campo" style="width: 130px;" name="tipo1">
				   				<option value="VARCHAR">VARCHAR</option>
				   				<option value="TINYINT">TINYINT</option>
				   				<option value="TEXT">TEXT</option>
				   				<option value="DATE">DATE</option>
				   				<option value="SMALLINT">SMALLINT</option>
				   				<option value="MEDIUMINT">MEDIUMINT</option>
				   				<option value="INT">INT</option>
				   				<option value="BIGINT">BIGINT</option>
				   				<option value="FLOAT">FLOAT</option>
				   				<option value="DOUBLE">DOUBLE</option>
				   				<option value="DECIMAL">DECIMAL</option>
				   				<option value="DATETIME">DATETIME</option>
				   				<option value="TIMESTAMP">TIMESTAMP</option>
				   				<option value="TIME">TIME</option>
				   				<option value="YEAR">YEAR</option>
				   				<option value="DOUBLE">DOUBLE</option>
				   				<option value="CHAR">CHAR</option>
				   				<option value="TINYBLOB">TINYBLOB</option>
				   				<option value="TINYTEXT">TINYTEXT</option>
				   				<option value="BLOB">BLOB</option>
				   				<option value="MEDIUMBLOD">MEDIUMBLOD</option>
				   				<option value="MEDIUMTEXT">MEDIUMTEXT</option>
				   				<option value="LONGBLOB">LONGBLOB</option>
				   				<option value="LONGTEXT">LONGTEXT</option>
				   				<option value="ENUM">ENUM</option>
				   				<option value="SET">SET</option>
				   			</select>
				   		</td>
				   		<td align="center"><input class="campo" style="width: 40px;" type="text" name="longitud1"/></td>
				   		<td align="center"><input class="campo" type="text" name="default1" value="null"/></td>
				   		<td align="center">
				   			<select class="campo" name="atributos1">
				   				<option value="BINARY">BINARY</option>
				   				<option value="UNSIGNED">UNSIGNED</option>
				   				<option value="UNSIGNED ZEROFILL">UNSIGNED ZEROFILL</option>
				   			</select>
				   		</td>
				   		<td align="center"><input type="checkbox" name="nulo1"/></td>
				   		<td align="center">
				   			<select class="campo" name="atr1" id="atri1" onchange="atr(1)">
				   				<option value="">----</option>
				   				<option value="PRIMARY KEY">PRIMARY</option>
				   				<option value="UNIQUE">UNIQUE</option>
				   				<option value="INDEX">INDEX</option>
				   				<option value="FULL TEXT">FULL TEXT</option>
				   			</select>
				   		</td>
				   		<td align="center"><input id="a_i1" type="checkbox" name="a_i1" disabled="disabled"/></td>
				   	</tr>
		 	</table>
		 	<button id="aniadir" onclick="aumentarCampo()" type="button" class="boton">Añadir campo</button>
		 	<button id="quitar" disabled="disabled" onclick="quitarCampo()" type="button" class="boton">Quitar campo</button>
	 	</div>
	 	<br />
	 	<br />
	 	<input type="hidden" name="numCampos" value="${num }" />
	 	<input type="hidden" name="table" value="${listaTablesBean.table}" />
	 	<input type="hidden" name="database" value="${listaTablesBean.database}" />
	 	<input type="hidden" name="user" value="${listaTablesBean.user}" />
	 	<input type="hidden" name="pass" value="${listaTablesBean.pass}" />
	 	<input type="hidden" name="host" value="${listaTablesBean.host}" />
	 	<input type="hidden" name="port" value="${listaTablesBean.port}" />
	 	<input type="submit" name="confirmar" value="Confirmar" class="boton" />
	 	</form>
	</div>

</div>

</div>
</div>
</body>
</html>
</jsp:root>